<template>
            <el-collapse-item title="画面切换" name="picmap">
                <span>图形路径</span>
                <el-button  @click="openPicSelect" style="margin-left: 20px" >选择</el-button>
                <el-input v-model="curComponent.propValue.picPath" type="textarea" :rows="2" />
                <span>图形映射</span>
                <el-table :data="curComponent.propValue.picMap" style="width: 100%">
                    <el-table-column prop="value" label="数值"  width="30"/>
                    <el-table-column prop="picpath" label="画面" />

                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button>

                            <!-- :icon="InfoFilled" -->
                            <el-popconfirm
                                width="220"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                icon-color="#626AEF"
                                title="确定删除吗？"
                                @confirm="handleDelete(scope.$index, scope.row)"
                            >
                                <template #reference>
                                <el-button size="small"  type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>

                </el-table>
                <span>显示索引</span>
                <el-input-number v-model="curComponent.propValue.displayIndex"  
                :min="0"  :max="picMapMaxIndex"  type="number"   @change="handleChangeIndex"  />

                <el-button  @click="addMap">添加</el-button>
                <DlgAddMap ref="dlgaddmap"  :dialog-visible="dialogVisible"  @res-add-map="handleAddMap" ></DlgAddMap>
                <DlgBackPicFile  :dialog-visible="dlgPicVisible" :config-new-file="false" @res-file="handleSelectPicFile"  > </DlgBackPicFile>
            </el-collapse-item>
</template>

<script>

import { InfoFilled } from '@element-plus/icons-vue'

import { mapState } from 'vuex'
import DlgAddMap from './DlgAddMap.vue';
import DlgBackPicFile from '@/draw/drwfile/DlgBackPicFile.vue';

export default {
    components: {  DlgAddMap,  InfoFilled, DlgBackPicFile },  //
    data() {
        return {
            dialogVisible: false ,
            dlgPicVisible: false ,
            arrayPicMap: [],
            insertIndex: -1,   //增加的序号 ，如果大于零则表示是修改行
        }
    },
    computed: {
        ...mapState([
        'curComponent',
        ]),
        picMapMaxIndex() {
            return this.curComponent.propValue.picMap.length-1;
        },
    },


    methods: {
        //增加一个画面映射
        addMap(  ){
            this.insertIndex = -1
            this.dialogVisible = true 
        },

        handleAddMap( code , result ){
            if( code == 1 ) {
                if( this.insertIndex == -1 )
                    this.curComponent.propValue.picMap.push( JSON.parse( JSON.stringify(result) ))
                else{
                    this.curComponent.propValue.picMap.splice( this.insertIndex , 1 )
                    this.curComponent.propValue.picMap.splice( this.insertIndex , 0, JSON.parse( JSON.stringify(result) ))
                }
                if(  this.curComponent.propValue.picMap.length === 1 )
                    this.curComponent.propValue.picPath = this.curComponent.propValue.picMap[0].picpath
            }
                        
            this.dialogVisible = false 
        },

        handleEdit( index, row ){
            console.log( index, row )
            this.insertIndex = index 
            this.$refs.dlgaddmap.init( row ) //使用增加的对话框来进行编辑操作
            this.dialogVisible = true
        },

        //提示删除
        handleDelete( index, row ){
            this.curComponent.propValue.picMap.splice( this.insertIndex , 1 )
        },

        openPicSelect(  ){
            this.dlgPicVisible = true 
        },

        handleSelectPicFile( code, res  ){
            if( code === 1 ){ 
                if ( res.dir === "/" )
                    this.curComponent.propValue.picPath = "images" + res.dir + res.filename
                else
                    this.curComponent.propValue.picPath = "images" + res.dir + "/" + res.filename
            }
            this.dlgPicVisible = false
        },

        handleChangeIndex( val ){
            if( val < 0 || val > this.picMapMaxIndex ||  this.curComponent.propValue.picMap.length === 0  )
                return
            this.curComponent.propValue.picPath=this.curComponent.propValue.picMap[val].picpath;
        },
        
    },
}
</script>

<style lang="scss" scoped>
.clsOneDot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clsOneDot span {
    width: 250px;
    text-align: left;
    margin-left: 20px;
}

.list {
        height: 30px;
        cursor: grab;
        text-align: center;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        padding: 0 10px;
        position: relative;
        user-select: none;

        .icon-container {
            .iconfont {
                cursor: default;
                font-size: 24px;
            }
        }
}

::v-deep( .el-collapse-item__header ){

  background-color: lightgray;
}
</style>
